<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图书管理系统</title>
	<!-- 引入Google字体 -->
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<!-- 引入Font Awesome图标 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style type="text/css">
		/* 基础样式设置 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Pacifico', cursive;
			background-color: #f0f9f0;
			color: #333;
			line-height: 1.6;
			padding-bottom: 50px;
		}

		/* 标题样式 */
		h1 {
			text-align: center;
			color: #2d8659;
			margin: 30px 0;
			font-size: 2.5rem;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
		}

		/* 导航菜单 */
		.nav-container {
			background-color: #b8e186;
			border-radius: 10px;
			width: 80%;
			max-width: 800px;
			margin: 0 auto 30px;
			padding: 15px;
			box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		}

		ul {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}

		ul li {
			list-style: none;
			margin: 0 15px;
		}

		ul li a {
			text-decoration: none;
			color: #2d6944;
			font-size: 1.2rem;
			padding: 8px 15px;
			border-radius: 20px;
			transition: all 0.3s ease;
			position: relative;
		}

		ul li a:hover {
			background-color: #2d8659;
			color: white;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
		}

		ul li a::after {
			content: '';
			position: absolute;
			width: 0;
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: #2d6944;
			transition: width 0.3s ease;
		}

		ul li a:hover::after {
			width: 100%;
			background-color: white;
		}

		/* 搜索区域 */
		.search-container {
			width: 80%;
			max-width: 800px;
			margin: 0 auto 30px;
			background-color: #e6f4ea;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		}

		.search-container p {
			color: #2d6944;
			font-size: 1.3rem;
			margin-bottom: 15px;
			text-align: center;
		}

		form {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 15px;
		}

		input[type="text"] {
			padding: 10px 15px;
			border: 2px solid #b8e186;
			border-radius: 20px;
			font-family: 'Pacifico', cursive;
			font-size: 1rem;
			width: 200px;
			transition: all 0.3s ease;
		}

		input[type="text"]:focus {
			outline: none;
			border-color: #2d8659;
			box-shadow: 0 0 0 3px rgba(45, 134, 89, 0.2);
			width: 220px;
		}

		input[type="submit"] {
			background-color: #2d8659;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 20px;
			font-family: 'Pacifico', cursive;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		input[type="submit"]:hover {
			background-color: #1e5a3c;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
		}

		/* 表格样式 */
		table {
			width: 80%;
			max-width: 1000px;
			margin: 0 auto;
			border-collapse: separate;
			border-spacing: 0;
			background-color: white;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}

		th, td {
			padding: 15px;
			text-align: center;
		}

		th {
			background-color: #2d8659;
			color: white;
			font-weight: normal;
			position: relative;
		}

		th::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: #1e5a3c;
			transform: scaleX(0);
			transition: transform 0.3s ease;
		}

		table:hover th::after {
			transform: scaleX(1);
		}

		tr {
			transition: background-color 0.3s ease;
		}

		tr:nth-child(even) {
			background-color: #f0f9f0;
		}

		tr:hover {
			background-color: #e6f4ea;
			transform: translateX(5px);
		}

		td a {
			text-decoration: none;
			color: #2d6944;
			margin: 0 8px;
			transition: all 0.3s ease;
			display: inline-flex;
			align-items: center;
			gap: 5px;
		}

		td a:hover {
			color: #1e5a3c;
			text-decoration: underline;
			transform: scale(1.1);
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			.nav-container, .search-container, table {
				width: 95%;
			}

			ul li {
				margin: 5px 10px;
			}

			input[type="text"] {
				width: 100%;
			}

			input[type="text"]:focus {
				width: 100%;
			}

			th, td {
				padding: 10px 5px;
				font-size: 0.9rem;
			}
		}
	</style>
</head>
<body>
<h1><i class="fas fa-book"></i> 图书管理系统</h1>

<div class="nav-container">
	<ul>
		<li><a href="/book/addBook"><i class="fas fa-plus-circle"></i> 添加图书</a></li>
		<li><a href="/admin/peopleInfo"><i class="fas fa-user"></i> 查看个人信息</a></li>
		<li><a href="/admin/logout"><i class="fas fa-sign-out-alt"></i> 安全退出</a></li>
	</ul>
</div>

<div class="search-container">
	<p>根据条件查找图书</p>
	<form action="/admin/index" method="post">
		书名: <input type="text" placeholder="输入书名" name="bookName"/>
		作者: <input type="text" placeholder="输入作者" name="bookAuthor" />
		<input type="submit" value="查询" /><i class="fas fa-search"></i>
	</form>
</div>

<table>
	<tr>
		<th>编号</th>
		<th>书名</th>
		<th>作者</th>
		<th>价格</th>
		<th>库存</th>
		<th>操作</th>
	</tr>
	#for( book : booklist)
	<tr>
		<td>#(for.count)</td>
		<td>#(book?.bookName)</td>
		<td>#(book?.bookAuthor)</td>
		<td>#(book?.bookPrice)</td>
		<td>#(book?.bookNum)</td>
		<td>
			<a href="/book/editBook?bookid=#(book.bookId)"><i class="fas fa-edit"></i> 修改</a>
			<a href="/book/delBook?bookid=#(book.bookId)"><i class="fas fa-trash-alt"></i> 删除</a>
		</td>
	</tr>
	#else
	<tr>
		<td colspan="6">暂无书籍信息</td>
	</tr>
	#end

</table>
</body>
</html>
